<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>系统功能</el-breadcrumb-item>
				<el-breadcrumb-item>编辑菜单</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="基本信息" name="info">
						<div class="tab-content">
							<el-form-item label="所属父级">
								<dt-dropdown-select v-model="model.parentId"
									:disabled="model.id"
									:data="listData"
									placeholder="请选择">
								</dt-dropdown-select>
							</el-form-item>
							<el-form-item prop="name" label="菜单标识">
								<el-input v-model="model.name" placeholder="必填，只允许英文下划线"></el-input>
							</el-form-item>
							<el-form-item prop="title" label="显示标题">
								<el-input v-model="model.title" placeholder="必填，128字符内"></el-input>
							</el-form-item>
							<el-form-item label="副标题">
								<el-input v-model="model.subTitle" placeholder="可空，128字符内"></el-input>
							</el-form-item>
							<el-form-item label="图标样式">
								<el-input v-model="model.iconUrl" placeholder="以.开头的CSS样式，不填则默认"></el-input>
							</el-form-item>
							<el-form-item label="链接地址">
								<el-input v-model="model.linkUrl" placeholder="可空，512字符内"></el-input>
							</el-form-item>
							<el-form-item prop="sortId" label="排序数字">
								<el-input v-model="model.sortId" placeholder="数字越小越排前"></el-input>
							</el-form-item>
							<el-form-item prop="controller" label="控制器名称">
								<el-input v-model="model.controller" placeholder="必填，API权限控制器名称"></el-input>
							</el-form-item>
							<el-form-item label="权限资源">
								<el-input v-model="model.resource" placeholder="必填，例如:Show,View,Add"></el-input>
							</el-form-item>
							<el-form-item label="备注说明">
								<el-input type="textarea" :rows="2" v-model="model.remark" placeholder="可空，500字符内"></el-input>
							</el-form-item>
							<el-form-item label="是否显示">
								<el-switch :active-value="0" :inactive-value="1" v-model="model.status"></el-switch>
							</el-form-item>
							<el-form-item label="系统菜单">
								<el-switch :active-value="1" :inactive-value="0" v-model="model.isSystem"></el-switch>
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtDropdownSelect from '../../../components/DtDropdownSelect.vue'
	
	export default {
		components: {
			DtDropdownSelect
		},
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				listData: [],
				model: {
					id: 0,
					parentId: 0,
					name: null,
					title: null,
					subTitle: null,
					iconUrl: null,
					linkUrl: null,
					remark: null,
					controller: null,
					resource: null,
					sortId: 99,
					isSystem: 0,
					status: 0,
				},
				rules: {
					name: [
						{ required: true, message: '请输入导航菜单名称', trigger: 'blur' },
						{ min: 2, max: 128, message: '长度在 2 到 128 个字符', trigger: 'blur' },
						{ pattern: /^[a-zA-Z_]{1,}$/, message: '只能字母和下划线', trigger: 'blur' }
					],
					title: [
						{ required: true, message: '请输入导航菜单标题', trigger: 'blur' }
					],
					sortId: [
						{ required: true, message: '请输入排序数字', trigger: 'blur' },
						{ pattern: /^[+]{0,1}(\d+)$/, message: '只能为正整数', trigger: 'blur' }
					],
					controller: [
						{ required: true, message: '请填写API控制器名称', trigger: 'blur' }
					],
					resource: [
						{ required: true, message: '请填写权限资源,以逗号分开', trigger: 'blur' }
					]
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				let parentId = _this.$route.query.parentId; //获取父ID
				if (_this.id) {
					this.$api.request({
						url: '/admin/manager/menu/' + _this.id,
						loading: true,
						success(res) {
							//赋值给model
							Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
						}
					});
				} else if (parentId) {
					_this.model.parentId = parseInt(parentId);
				}
				//加载菜单列表
				this.$api.request({
					url: '/admin/manager/menu',
					loading: true,
					success(res) {
						_this.listData = res.data
					}
				});
			},
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					//如果是数组则取最后一个值
					if (Array.isArray(_this.model.parentId)) {
						_this.model.parentId = _this.model.parentId[_this.model.parentId.length - 1];
					}
					//提交表单,Id大于0则修改，否则添加
					if (_this.model.id > 0) {
						_this.$api.request({
							method: 'put',
							url: '/admin/manager/menu/' + _this.model.id,
							data: _this.model,
							successMsg: '修改管理菜单已成功',
							beforeSend() {
								_this.loading = true;
							},
							success(res) {
								//重新加载菜单
								_this.$emit('loadMenu'); //通知父组件更新
								_this.$common.linkUrl('/manager/menu/list');
							},
							complete() {
								_this.loading = false;
							}
						});
					} else {
						_this.$api.request({
							method: 'post',
							url: '/admin/manager/menu',
							data: _this.model,
							successMsg: '新增管理菜单已成功',
							beforeSend() {
								_this.loading = true;
							},
							success(res) {
								//重置表单
								_this.$refs['editForm'].resetFields();
								//重新加载菜单
								_this.$emit('loadMenu'); //通知父组件更新
							},
							complete() {
								_this.loading = false;
							}
						});
					}
				})
			},
		},
		created() {
			this.initData();
		}
	}
</script>